<template>
    <div>
<!--        登录-->
<!--        <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>-->
        <el-dialog
                :visible.sync="dialogVisible"
                width="360px"
                :before-close="handleClose">
                <el-tabs v-model="activeName"  stretch>
                    <el-tab-pane label="普通登录" name="first">
                      <div class="user-account">
                          <span class="el-icon-user"></span>
                          <input type="text"  placeholder="请输入账号" v-model="user">
                      </div>
                        <div class="uesr-password">
                            <span class="el-icon-lock"></span>
                            <input @keyup.enter="getLogin" type="password" placeholder="请输入密码" v-model="password">
                        </div>
                        <button class="btn-1" @click="getLogin">登录</button>
                    </el-tab-pane>
                    <el-tab-pane label="手机号登录" name="second">
                        <div class="user-account">
                            <span class="el-icon-user"></span>
                            <input type="text"  placeholder="请输入手机号" v-model="phone">
                        </div>
                        <div class="uesr-password " >
                            <span class="el-icon-lock"></span>
                            <input type="text" placeholder="请输入验证码" v-model="writeCode">
                            <button class="code" @click="codePhone">获取验证码</button>
                        </div>
<!--                        /1-->
                        <button class="btn-1" @click="getPhoneLogin">登录</button>
                    </el-tab-pane>
                </el-tabs>

           <div class="bottom">
               <div>立即注册!</div>
               <div @click="forget">忘记密码</div>
           </div>
        </el-dialog>

        <el-dialog
                :visible.sync="forgetVisible"
                width="360px"
                :before-close="handleClose">
            <div>
                <div style="text-align: center;margin-bottom: 5px">忘记密码</div>
                <div class="user-account">
<!--                    <span class="el-icon-user"></span>-->
                    <input type="text"  placeholder="请输入账号" v-model="forgetUser">
                </div>
                <div class="uesr-password">
<!--                    <span class="el-icon-lock"></span>-->
                    <input type="password" placeholder="请输入新密码" v-model="newPassword">
                </div>
                <div class="uesr-password">
<!--                    <span class="el-icon-lock"></span>-->
                    <input type="password" placeholder="请再次输入新密码" v-model="againPassword">
                </div>
                <div class="uesr-password">
<!--                    <span class="el-icon-lock"></span>-->
                    <input type="text" placeholder="请输入手机号" v-model="newPhone">
                </div>
                <div class="uesr-password">
<!--                    <span class="el-icon-lock"></span>-->
                    <input type="text" placeholder="请输入验证码" v-model="newCode">
                    <button class="code" @click="newPhoneCode">获取验证码</button>
                </div>
            </div>
            <button class="confirm-pwd" @click="surePassword">确认更改密码</button>
            <div class="bottom">
                <div>立即注册!</div>
                <div @click="goLogin">去登录</div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {forgetCode, forgetGoLogin, getLoginRequest, getPhoneCode, loginPhoneCode} from "../api/login";

    export default {
        name: "login",
        data(){
            return {
                dialogVisible: false,//登录框默认不打开
                activeName: 'first',//tabs切换默认第一个
                forgetVisible:false,//忘记密码框
                user:'',//普通登录账号
                password:'',//普通登录密码
                phone:'',//输入手机号获取验证码
                writeCode:'',//写验证码
                forgetUser:'',//忘记密码页的用户名
                newPassword:'',//忘记密码页第一个密码框
                againPassword:'',//忘记密码页第二个密码框
                newPhone:'',//忘记密码页的手机号
                newCode:'',//忘记密码页的验证码
            }
        },
        methods:{
            handleClose(done) {
               done()
            },
            //忘记密码弹窗
            forget(){
                this.dialogVisible=false;
                this.forgetVisible=true;
            },
            //去登录弹窗
            goLogin(){
                this.forgetVisible=false
                this.dialogVisible=true;
            },
            //普通登录事件
            getLogin(){
                getLoginRequest(this.user,this.password).then(res=>{
                    console.log(res)
                    //如果登录成功了，改变vuex里面的值
                    //第一个参数为函数名，第二个参数为传过去的值

                    if(res.msg=="操作成功") {
                        this.$store.commit("modifyLoginType",{isLogin:true,userInfo:res.userInfo})
                        this.dialogVisible=false;
                        this.$message({
                            message: '登录成功',
                            type: 'success'
                        });
                        // // alert("你登录成功了")
                        // window.location.href="/personalCenter"
                    } else {
                        this.dialogVisible=false
                        this.$message({
                            message: '登录失败',
                            type: 'error'
                        });
                    }
                })

            },
            //手机登录请求验证码
            codePhone(){
                getPhoneCode(this.phone).then(res=>{
                    console.log(res)
                })
            },
            getPhoneLogin(){
                loginPhoneCode(this.phone,this.writeCode).then(res=>{
                    if(res.msg=="操作成功") {
                        alert("你用手机号登录成功了")
                    }
                })
            },
            //忘记密码页的请求验证码
            newPhoneCode(){
                forgetCode(this.forgetUser,this.newPhone).then(res=>{
                    console.log(res)
                })
            },
            //忘记密码登录
            surePassword(){
                if(this.newPassword==this.againPassword) {
                    forgetGoLogin(this.forgetUser,this.newPassword,this.newPhone,this.newCode).then(res=>{
                        console.log(res)
                        console.log(this.forgetUser);
                        console.log(this.newPassword)
                        console.log(this.newPhone)
                        console.log(this.newCode)

                        if(res.msg=="操作成功") {
                            alert("密码修改成功")
                        } else {
                            alert("密码修改失败")
                        }
                    })
                } else {
                    alert("两次密码不同")
                }

            }



        },
        created() {
            if(this.$route.query.dialog=="true") {
                this.dialogVisible=true
            }
        },
        props:{
            loginType:Boolean
        },
        watch:{
            loginType(){
                this.dialogVisible=true
            }
        }




    }
</script>

<style scoped lang="less">
/deep/ .el-dialog__header {
    margin: 0;
    padding: 0;
}
    /deep/ .el-dialog__body {
        /*width: 200px;*/
        /*height: 200px ;*/
    }
    /deep/ #tab-first {
        margin-left: 10px;
    }
   /deep/ .el-tabs__item.is-active {
       color: #00cf8c;
   }
/deep/  .el-tabs__item:hover {
    color:#00cf8c;
}
/deep/ .el-tabs__active-bar {
    background: #00cf8c;
}
    /deep/ .el-tabs__nav {
        width: 100%;
        display: flex;
        justify-content: center;
    }
.user-account {
    width: 318px;
    height: 32px;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    input {
        width: 90%;
        outline: 0;
        border: 0;
        padding-top: 7px;
        padding-left: 5px;
        font-size: 14px;
        /*line-height: 20px;*/
    }
    span {
        margin-left: 5px;
    }
}
.uesr-password {
    position: relative;
    margin-top: 20px;
    width: 318px;
    height: 32px;
    border: 1px solid #d9d9d9;
    border-radius: 5px;

    input {
        width: 90%;
        outline: 0;
        border: 0;
        padding-top: 7px;
        padding-left: 5px;
        font-size: 14px;
        /*line-height: 20px;*/
    }
    span {
        margin-left: 5px;
    }
}

.user-account:hover,
.uesr-password:hover {
   border: 1px solid #00cf8c;
}
.btn-1 {
    margin-top: 20px;
    width: 318px;
    height: 32px;
    color: #fff;
    border: 0;
    background-color: #00cf8c;


}
    .bottom {
        margin-top: 10px;
        overflow: hidden;
    }
.bottom>div:nth-of-type(1) {
    float: left;
}
.bottom>div:nth-of-type(2) {
    float: right;
}
.bottom>div:nth-of-type(1):hover,
.bottom>div:nth-of-type(2):hover {
    cursor: pointer;
    color: #00cf8c;
}
    .code {
        position: absolute;
        right: 0px;
        top: 0px;
        width: 115px;
        height: 32px;
        border-radius: 6px;
        color: #fff;
        background-color: #00cf8c;
        border: 0;
    }
.confirm-pwd {
    margin-top: 20px;
    width: 116px;
    height: 32px;
    color: #fff;
    background-color: #00cf8c;
    /*border-color: #00cf8c;*/
    border: 0;
}

</style>